import { useState } from "react";
import AddShop from "./AddShop";
import ShoppingList from "./shoppingList";
import Summary from "./Summary";

function App() {
    const [data, setData] = useState([
        {
            id: 1,
            title: "苹果",
            amount: 0,
            price: 15,
            totalPrice: 0
        },
        {
            id:2,
            title: "香蕉",
            amount: 0,
            price: 10,
            totalPrice: 0
        },
        {
            id:3,
            title: "进口车厘子",
            amount: 0,
            price: 98,
            totalPrice: 0
        }
    ])

    const changeAmount = (id,amount,totalPrice) =>{  
        const newData = data.map( item => {
            if(item.id === id){
                return {
                    ...item,
                    amount,
                    totalPrice
                }            
            }
            return item
        })
        setData(newData)
    }

    const addShop = (newdata) =>{
        setData([...data,newdata])
    }

    return (
        <>  
            <AddShop addShop = {addShop} />        
            <ShoppingList data={data} changeAmount = {changeAmount} />
            <Summary data={data} />
        </>
    )
}

export default App